<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿推荐 - 心愿社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e74c3c;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 页面标题 */
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .section-description {
            color: #6c757d;
            margin-bottom: 2rem;
        }
        
        /* 分类标签 */
        .category-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        .category-tab {
            padding: 6px 16px;
            border-radius: 20px;
            background-color: white;
            border: 1px solid #dee2e6;
            color: #495057;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-tab.active {
            background-color: #e74c3c;
            color: white;
            border-color: #e74c3c;
        }
        
        .category-tab:hover:not(.active) {
            border-color: #e74c3c;
            color: #e74c3c;
        }
        
        /* 许愿卡片通用样式 */
        .wish-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .wish-content {
            padding: 1rem;
        }
        
        .wish-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-description {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-meta {
            display: flex;
            align-items: center;
            color: #6c757d;
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .wish-meta .dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #6c757d;
            margin: 0 8px;
        }
        
        .wish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .action-group {
            display: flex;
            gap: 1rem;
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .action-item:hover {
            color: #e74c3c;
        }
        
        .action-item.liked {
            color: #e74c3c;
        }
        
        .action-item.saved {
            color: #f39c12;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: #333;
            text-decoration: none;
        }
        
        .author-name:hover {
            color: #e74c3c;
            text-decoration: underline;
        }
        
        /* 布局1: 小卡片布局 - 左侧图片右侧内容 */
        .wish-card-layout1 {
            display: flex;
        }
        
        .wish-card-layout1 .wish-image {
            width: 120px;
            height: 120px;
            flex-shrink: 0;
        }
        
        .wish-card-layout1 .wish-content {
            flex: 1;
        }
        
        /* 布局2: 大图布局 - 图片在上，内容在下 */
        .wish-card-layout2 .wish-image-container {
            height: 200px;
            position: relative;
        }
        
        .wish-card-layout2 .wish-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
        }
        
        /* 布局3: 多图布局 */
        .wish-card-layout3 .wish-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            height: 160px;
        }
        
        .wish-card-layout3 .wish-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .wish-card-layout3 .wish-images.two-images .wish-image:first-child {
            grid-column: span 2;
        }
        
        .wish-card-layout3 .wish-images.four-images {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 布局4: 无图布局 */
        .wish-card-layout4 {
            border-left: 4px solid #e74c3c;
        }
        
        /* 布局5: 横向大图布局 */
        .wish-card-layout5 {
            flex-direction: row;
        }
        
        .wish-card-layout5 .wish-image-container {
            width: 30%;
            height: auto;
        }
        
        .wish-card-layout5 .wish-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .wish-card-layout5 .wish-content {
            width: 70%;
            padding: 1.5rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .wish-card-layout1 {
                flex-direction: column;
            }
            
            .wish-card-layout1 .wish-image {
                width: 100%;
                height: 160px;
            }
            
            .wish-card-layout5 {
                flex-direction: column;
            }
            
            .wish-card-layout5 .wish-image-container,
            .wish-card-layout5 .wish-content {
                width: 100%;
            }
            
            .wish-card-layout5 .wish-image-container {
                height: 180px;
            }
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 10px 24px;
            background-color: white;
            border: 1px solid #e74c3c;
            color: #e74c3c;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: #e74c3c;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心愿社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="mx-auto search-bar" style="max-width: 400px;">
                    <div class="input-group">
                        <input type="text" class="form-control rounded-pill" placeholder="搜索许愿、标签或用户..." aria-label="Search">
                        <button class="btn btn-danger rounded-pill ms-2" type="button">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto gap-3">
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active"><i class="fas fa-star me-1"></i> 许愿推荐</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger rounded-pill">
                            <i class="fas fa-plus me-1"></i> 发布许愿
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="mb-5">
            <h1 class="page-title">许愿推荐</h1>
            <p class="section-description">发现社区里有趣的愿望，或许你能帮他们实现</p>
            
            <!-- 分类标签 -->
            <div class="category-tabs">
                <div class="category-tab active">全部愿望</div>
                <div class="category-tab">热门推荐</div>
                <div class="category-tab">最新发布</div>
                <div class="category-tab">生日礼物</div>
                <div class="category-tab">节日愿望</div>
                <div class="category-tab">旅行相关</div>
                <div class="category-tab">学习成长</div>
                <div class="category-tab">生活家居</div>
            </div>
        </div>
        
        <!-- 布局1: 小卡片布局 - 左侧图片右侧内容 -->
        <h2 class="h4 mb-3">热门愿望</h2>
        <div class="row mb-6">
            <div class="col-md-6">
                <div class="wish-card wish-card-layout1">
                    <img src="https://picsum.photos/400/300?random=1" alt="手绘板" class="wish-image">
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=101" alt="陈明的头像" class="author-avatar">
                            <a href="#" class="author-name">陈明</a>
                            <span class="wish-meta">
                                <span>2小时前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">想要一块专业手绘板，开始我的数字绘画之旅</h3>
                        <p class="wish-description">一直想学习数字绘画，希望能有一块Wacom的手绘板，型号最好是Intuos Pro，预算在2000元左右。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>128</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>32</span>
                                </div>
                                <div class="action-item view-btn">
                                    <i class="far fa-eye"></i>
                                    <span>856</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>45</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="wish-card wish-card-layout1">
                    <img src="https://picsum.photos/400/300?random=2" alt="露营装备" class="wish-image">
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=102" alt="李婷的头像" class="author-avatar">
                            <a href="#" class="author-name">李婷</a>
                            <span class="wish-meta">
                                <span>5小时前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望能有一套轻便的露营装备，周末可以去郊外放松</h3>
                        <p class="wish-description">想开始尝试露营，需要一个双人帐篷和睡袋，希望重量轻一点，方便携带。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>256</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>58</span>
                                </div>
                                <div class="action-item view-btn">
                                    <i class="far fa-eye"></i>
                                    <span>1243</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>92</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 布局2: 大图布局 -->
        <h2 class="h4 mb-3">精选愿望</h2>
        <div class="row mb-6">
            <div class="col-lg-4 col-md-6">
                <div class="wish-card wish-card-layout2">
                    <div class="wish-image-container">
                        <img src="https://picsum.photos/600/400?random=10" alt="音乐会门票" class="wish-image">
                    </div>
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=103" alt="王浩的头像" class="author-avatar">
                            <a href="#" class="author-name">王浩</a>
                            <span class="wish-meta">
                                <span>昨天</span>
                            </span>
                        </div>
                        <h3 class="wish-title">想和女朋友一起去看周杰伦演唱会</h3>
                        <p class="wish-description">女朋友是周杰伦的忠实粉丝，希望能买到两张演唱会门票作为我们的周年纪念礼物。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>324</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>76</span>
                                </div>
                            </div>
                            <div class="action-item save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>128</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="wish-card wish-card-layout2">
                    <div class="wish-image-container">
                        <img src="https://picsum.photos/600/400?random=11" alt="烘焙工具" class="wish-image">
                    </div>
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=104" alt="张琳的头像" class="author-avatar">
                            <a href="#" class="author-name">张琳</a>
                            <span class="wish-meta">
                                <span>3天前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望有一套专业的烘焙工具，学习制作甜点</h3>
                        <p class="wish-description">最近对烘焙很感兴趣，想要一套基础的烘焙工具，包括烤箱、模具和搅拌工具等。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>156</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>28</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>64</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="wish-card wish-card-layout2">
                    <div class="wish-image-container">
                        <img src="https://picsum.photos/600/400?random=12" alt="英语课程" class="wish-image">
                    </div>
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=105" alt="刘洋的头像" class="author-avatar">
                            <a href="#" class="author-name">刘洋</a>
                            <span class="wish-meta">
                                <span>1周前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">想报名一个英语口语课程，提升我的英语水平</h3>
                        <p class="wish-description">马上要出国留学了，希望能在出发前提高英语口语能力，适应国外的生活。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>98</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>42</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>36</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 布局3: 多图布局 -->
        <h2 class="h4 mb-3">多图愿望</h2>
        <div class="row mb-6">
            <div class="col-md-6">
                <div class="wish-card wish-card-layout3">
                    <div class="wish-images two-images">
                        <img src="https://picsum.photos/600/300?random=20" alt="旅行照片1" class="wish-image">
                        <img src="https://picsum.photos/600/300?random=21" alt="旅行照片2" class="wish-image">
                        <span class="image-count">2/2</span>
                    </div>
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=106" alt="赵雪的头像" class="author-avatar">
                            <a href="#" class="author-name">赵雪</a>
                            <span class="wish-meta">
                                <span>2天前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望能有一次日本北海道之旅，欣赏美丽的雪景</h3>
                        <p class="wish-description">一直梦想去北海道看雪，泡温泉，品尝当地美食，希望今年冬天能实现这个愿望。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>421</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>87</span>
                                </div>
                                <div class="action-item view-btn">
                                    <i class="far fa-eye"></i>
                                    <span>2154</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>156</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="wish-card wish-card-layout3">
                    <div class="wish-images four-images">
                        <img src="https://picsum.photos/300/300?random=22" alt="猫咪用品1" class="wish-image">
                        <img src="https://picsum.photos/300/300?random=23" alt="猫咪用品2" class="wish-image">
                        <img src="https://picsum.photos/300/300?random=24" alt="猫咪用品3" class="wish-image">
                        <img src="https://picsum.photos/300/300?random=25" alt="猫咪用品4" class="wish-image">
                        <span class="image-count">4/4</span>
                    </div>
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=107" alt="孙萌的头像" class="author-avatar">
                            <a href="#" class="author-name">孙萌</a>
                            <span class="wish-meta">
                                <span>4天前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">想给我家猫咪添置一些用品，包括猫爬架和自动喂食器</h3>
                        <p class="wish-description">最近工作比较忙，希望能给猫咪买一些实用的用品，让它在家也能玩得开心。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>289</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>63</span>
                                </div>
                                <div class="action-item view-btn">
                                    <i class="far fa-eye"></i>
                                    <span>1567</span>
                                </div>
                            </div>
                            <div class="action-item save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                <span>103</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 布局4: 无图布局 -->
        <h2 class="h4 mb-3">文字愿望</h2>
        <div class="row mb-6">
            <div class="col-md-4">
                <div class="wish-card wish-card-layout4">
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=108" alt="周杰的头像" class="author-avatar">
                            <a href="#" class="author-name">周杰</a>
                            <span class="wish-meta">
                                <span>3小时前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望能找到一位编程导师，指导我学习Python</h3>
                        <p class="wish-description">刚入门编程，遇到了很多问题，希望能有一位有经验的开发者指导我，提高学习效率。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>76</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>24</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>32</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="wish-card wish-card-layout4">
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=109" alt="吴佳的头像" class="author-avatar">
                            <a href="#" class="author-name">吴佳</a>
                            <span class="wish-meta">
                                <span>昨天</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望能收到一本《人类简史》，一直想读这本书</h3>
                        <p class="wish-description">听说这本书很有启发性，想通过阅读拓宽自己的视野，了解人类发展的历程。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>54</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>27</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="wish-card wish-card-layout4">
                    <div class="wish-content">
                        <div class="author-info">
                            <img src="https://picsum.photos/100/100?random=110" alt="郑涛的头像" class="author-avatar">
                            <a href="#" class="author-name">郑涛</a>
                            <span class="wish-meta">
                                <span>3天前</span>
                            </span>
                        </div>
                        <h3 class="wish-title">希望有人能和我一起参加周末的公益活动，帮助流浪动物</h3>
                        <p class="wish-description">一个人参加活动有点孤单，希望能找到志同道合的朋友一起去照顾流浪动物。</p>
                        <div class="wish-actions">
                            <div class="action-group">
                                <div class="action-item like-btn liked">
                                    <i class="fas fa-heart"></i>
                                    <span>132</span>
                                </div>
                                <div class="action-item comment-btn">
                                    <i class="far fa-comment"></i>
                                    <span>47</span>
                                </div>
                            </div>
                            <div class="action-item save-btn">
                                <i class="far fa-bookmark"></i>
                                <span>58</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 布局5: 横向大图布局 -->
        <h2 class="h4 mb-3">详细愿望</h2>
        <div class="wish-card wish-card-layout5 d-flex mb-6">
            <div class="wish-image-container">
                <img src="https://picsum.photos/800/600?random=30" alt="钢琴课程" class="wish-image">
            </div>
            <div class="wish-content">
                <div class="author-info">
                    <img src="https://picsum.photos/100/100?random=111" alt="林小的头像" class="author-avatar">
                    <a href="#" class="author-name">林小</a>
                    <span class="wish-meta">
                        <span>1周前</span>
                        <span class="dot"></span>
                        <span>#兴趣爱好</span>
                        <span class="dot"></span>
                        <span>#音乐</span>
                    </span>
                </div>
                <h3 class="wish-title">希望能系统学习钢琴，圆自己一个音乐梦</h3>
                <p class="wish-description">从小就喜欢音乐，一直想学钢琴但没有机会。现在工作稳定了，希望能报名一个钢琴课程，从基础开始学习。最好是一对一的教学，每周能有2-3次课。预算在每月1000元左右。如果能有一架二手钢琴练习就更好了，全新的太贵了暂时负担不起。希望能找到有耐心的老师，我会认真学习的！</p>
                <div class="wish-actions">
                    <div class="action-group">
                        <div class="action-item like-btn">
                            <i class="far fa-heart"></i>
                            <span>356</span>
                        </div>
                        <div class="action-item comment-btn">
                            <i class="far fa-comment"></i>
                            <span>94</span>
                        </div>
                        <div class="action-item view-btn">
                            <i class="far fa-eye"></i>
                            <span>2456</span>
                        </div>
                    </div>
                    <div class="action-item save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>187</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-spinner fa-spin me-2" style="display: none;"></i>
            加载更多愿望
        </button>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 mt-5 border-top">
        <div class="container">
            <div class="text-center">
                <div class="mb-3">
                    <a href="#" class="logo">
                        <i class="fas fa-heart"></i>
                        <span>心愿社交</span>
                    </a>
                </div>
                <p class="text-muted mb-3">分享你的愿望，连接每一份善意</p>
                <div class="d-flex justify-content-center gap-4 mb-4">
                    <a href="#" class="text-muted"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p class="text-muted text-sm">&copy; 2023 心愿社交 版权所有</p>
            </div>
        </div>
    </footer>
    


    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 分类标签切换
        const categoryTabs = document.querySelectorAll('.category-tab');
        categoryTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                categoryTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                showNotification(`已切换到${this.textContent}`);
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                const currentCount = parseInt(countElem.textContent);
                
                if (icon.classList.contains('far')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('liked');
                    countElem.textContent = currentCount + 1;
                    showNotification('点赞成功');
                } else {
                    // 取消点赞
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    countElem.textContent = currentCount - 1;
                    showNotification('取消点赞');
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                const currentCount = parseInt(countElem.textContent);
                
                if (icon.classList.contains('far')) {
                    // 收藏
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('saved');
                    countElem.textContent = currentCount + 1;
                    showNotification('收藏成功');
                } else {
                    // 取消收藏
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('saved');
                    countElem.textContent = currentCount - 1;
                    showNotification('取消收藏');
                }
            });
        });
        
        // 评论按钮点击
        document.querySelectorAll('.comment-btn').forEach(button => {
            button.addEventListener('click', function() {
                const wishTitle = this.closest('.wish-card').querySelector('.wish-title').textContent;
                showNotification(`查看 "${wishTitle.substring(0, 10)}..." 的评论`);
            });
        });
        
        // 加载更多
        const loadMoreBtn = document.querySelector('.load-more');
        loadMoreBtn.addEventListener('click', function() {
            const spinner = this.querySelector('i');
            spinner.style.display = 'inline-block';
            this.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                spinner.style.display = 'none';
                this.disabled = false;
                showNotification('已加载全部愿望');
            }, 1500);
        });
        
    </script>
</body>
</html>

